<div>
  <section class="bg-gray-50">
    <div class="max-w-5xl mx-auto p-4 md:p-6 md:pt-18">
      <% if policy_scope(Organisation).count > 1 %>
        <div class="md:mt-4 overflow-x-auto">
          <%= render 'shared/breadcrumbs', crumbs: [["My Org", "/organisations"], [@organisation.name]] %>
        </div>
      <% end %>
      <p class="mt-5 text-gray-600 text-sm"><%= t('.organisation_label') %></p>
      <h1 class="text-xl md:text-3xl font-bold"><%= @organisation.name %></h1>
      <div class="mt-6 flex items-center gap-12">
        <div>
          <h3 class="text-sm text-gray-600"><%= t('.total_students_label') %></h3>
          <p class="text-xl font-bold"><%= @counts[:total_students] %></p>
        </div>
        <div class="ps-5 border-s border-gray-300">
          <h3 class="text-sm text-gray-600"><%= t('.active_students_label') %></h3>
          <p class="text-xl font-bold"><%= @counts[:active_students] %></p>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-white">
    <div class="max-w-5xl mx-auto p-4 md:p-6">
      <h2 class="text-xl font-semibold mt-4"><%= t('.students_enrolled_heading') %></h2>
      <% @courses_with_cohorts.each do |course_with_cohorts| %>
        <div class="border border-gray-200 bg-gray-50 rounded-lg p-5 my-4">
          <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div class="mb-2">
              <h3 class="text-lg font-semibold" ><%= course_with_cohorts[:course].name %></h3>
              <p class="text-sm text-gray-600">
                <% if course_with_cohorts[:cohorts].present? %>
                  <%= t('.active_prefix_html', count: course_with_cohorts[:active_students]) %>
                  <%= t('.active_suffix_html', count: course_with_cohorts[:cohorts].count) %>
                <% end %>
              </p>
            </div>
            <% if course_with_cohorts[:ended_cohorts_ids].present? %>
              <%= link_to course_with_cohorts[:cohorts].empty? ? ended_cohorts_organisation_course_path(@organisation, course_with_cohorts[:course].id) : active_cohorts_organisation_course_path(@organisation, course_with_cohorts[:course].id), class: "group border border-primary-400 sm:border-transparent rounded-lg p-2 text-sm font-medium text-primary-500 hover:text-primary-800 hover:bg-primary-50 sm:hover:border-primary-400 whitespace-nowrap" do %>
                <span><%= t('.view_all_cohorts') %></span>
                <span class="bg-gray-300 text-gray-900 group-hover:bg-primary-500 group-hover:text-white text-xs leading-none rounded-md px-1.5 py-1 ms-1.5">
                  <%= course_with_cohorts[:ended_cohorts_ids].count + course_with_cohorts[:cohorts].count %>
                </span>
              <% end %>
            <% end %>
          </div>
          <% if course_with_cohorts[:cohorts].present? %>
            <div class="mt-4">
              <p class="text-black text-sm font-semibold"><%= t('.active_cohorts_subheading')  %></p>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-4">
                <% course_with_cohorts[:cohorts].each do |cohort| %>
                  <%= link_to organisation_cohort_path(@organisation, cohort), class: "flex items-center justify-between bg-white rounded-lg border border-gray-200 p-6 shadow hover:bg-primary-50 hover:text-primary-500 hover:border-primary-400" do %>
                    <div>
                      <span class="font-medium"><%= cohort.name %></span>
                      <% if cohort.ends_at.present? %>
                        <div>
                          <span class="text-sm text-gray-500 font-medium" ><%= t(".end_date") %> </span>
                          <span class="font-semibold text-sm"><%= cohort.ends_at.strftime("%B %d, %Y") %></span>
                        </div>
                      <% end %>
                    </div>
                    <i class="if i-arrow-right-regular rtl:rotate-180 inline-block text-primary-500" aria-hidden="true"></i>
                  <% end %>
                <% end %>
              </div>
            </div>
          <% else %>
            <p class="text-center text-sm italic font-medium bg-gray-100 p-4 mt-4 sm:mt-2"><%= t('.no_active_cohorts') %></p>
          <% end %>
        </div>
      <% end %>
    </div>
  </section>
</div>
